@import './variables.scss';

.row {
  flex-direction: row;
}

.col {
  flex: 1;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-muted {
  color: $gray-300;
}

.text-primary {
  color: $primary;
}

.text-error {
  color: $error;
}

.text-warning {
  color: $warning;
}

.text-info {
  color: $info;
}

.bg-white {
  background-color: #fff;
}

.bg-primary {
  background-color: $primary;
}

.bg-danger {
  background-color: $error;
}

.bg-warning {
  background-color: $warning;
}

.bg-info {
  background-color: $info;
}

.p-1 {
  padding: 5px;
}

.p-2 {
  padding: 10px;
}

.p-3 {
  padding: 15px;
}

.p-4 {
  padding: 30px;
}

.p-5 {
  padding: 45px;
}

.px-1 {
  padding-left: 5px;
  padding-right: 5px;
}

.px-2 {
  padding-left: 10px;
  padding-right: 10px;
}

.px-3 {
  padding-left: 15px;
  padding-right: 15px;
}

.px-4 {
  padding-left: 30px;
  padding-right: 30px;
}

.px-5 {
  padding-left: 45px;
  padding-right: 45px;
}

.py-1 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.py-2 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py-3 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.py-4 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.py-5 {
  padding-top: 45px;
  padding-bottom: 45px;
}

.m-1 {
  margin: 5px;
}

.m-2 {
  margin: 10px;
}

.m-3 {
  margin: 15px;
}

.m-4 {
  margin: 30px;
}

.m-5 {
  margin: 45px;
}

.mx-1 {
  margin-left: 5px;
  margin-right: 5px;
}

.mx-2 {
  margin-left: 10px;
  margin-right: 10px;
}

.mx-3 {
  margin-left: 15px;
  margin-right: 15px;
}

.mx-4 {
  margin-left: 30px;
  margin-right: 30px;
}

.mx-5 {
  margin-left: 45px;
  margin-right: 45px;
}

.my-1 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.my-2 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.my-3 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.my-4 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.my-5 {
  margin-top: 45px;
  margin-bottom: 45px;
}
